{% assign backgroundImage = Model.ContentItem.Content.VNavigationDrawer.BackgroundImage.Paths.first | asset_url %}
{% assign color = Model.ContentItem.Content.VNavigationDrawer.Color.Text %}
{% assign miniVariantWidth = Model.ContentItem.Content.VNavigationDrawer.MiniVariantWidth.Value %}
{% assign mobileBreakpoint = Model.ContentItem.Content.VNavigationDrawer.MobileBreakpoint.Value %}
{% assign overlayColor = Model.ContentItem.Content.VNavigationDrawer.OverlayColor.Text %}
{% assign overlayOpacity = Model.ContentItem.Content.VNavigationDrawer.OverlayOpacity.Value %}
{% assign height = Model.ContentItem.Content.VNavigationDrawer.Height.Value %}
{% assign width = Model.ContentItem.Content.VNavigationDrawer.Width.Value %}

<v-navigation-drawer app v-model="drawer"
  {{ Model.ContentItem.Content.VNavigationDrawer.Props.Values | join: ' ' | raw }}
  {% if backgroundImage %}src="{{ backgroundImage }}"{% endif %}
  {% if color %}color="{{ color }}"{% endif %}
  {% if miniVariantWidth %}mini-variant-width="{{ miniVariantWidth }}"{% endif %}
  {% if mobileBreakpoint %}mobile-breakpoint="{{ mobileBreakpoint }}"{% endif %}
  {% if overlayColor %}overlay-color="{{ overlayColor }}"{% endif %}
  {% if overlayOpacity %}overlay-opacity="{{ overlayOpacity }}"{% endif %}
  {% if height %}height="{{ height }}"{% endif %}
  {% if width %}width="{{ width }}"{% endif %}
>
  {% assign drawerAlias = "alias:navigation-drawer-" | append: Culture.Name %}
  {% shape "menu", alias: drawerAlias, cache_id: drawerAlias, cache_fixed_duration: "00:00:01", cache_tag: menuAlias %}
</v-navigation-drawer>
